<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./jquery.min.js"></script>
    </head>
    <body>

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5
                <i>子二级</i>
            </li>
            <i>子一级</i>
            <span>我是ul内的span</span>
            <li>6</li>
            <li>7
                <p>
                    <i>子三级</i>
                </p>
            </li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>

        <script>
            // 1.first()
            console.log($('li').first())

            // 2.last()
            console.log($('li').last())

            // 3.eq(索引)
            console.log($('li').eq(3))   //eq : equal

            // 4.next()
            console.log($('span').next())

            // 5.nextAll()
            console.log($('span').nextAll())

            // 6.prev()
            console.log($('span').prev())

            // 7.prevAll()
            console.log($('span').prevAll())

            // 8.parent()
            console.log($('span').parent())

            // 9.parents()
            console.log($('span').parents())

            // 10.siblings()
            console.log($('span').siblings())

            // 11.find('选择器')
            console.log($('ul').find('i'))
        </script>
    </body>
</html>
